<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>核对答案</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="./css/review-content.css"/>
    <style type="text/css">
        #wrap {
            position: relative;
            padding: 0.3rem 0.3rem 0.3rem 0.3rem;
            margin: 0;
        }

        .cupImgDiv {
            text-align: center;
        }

        .cupImg {
            width: 2.76rem;
            height: 2.3rem;
            margin-top: 0.3rem;

        }

        .cupContent {
            font-size: 0.28rem;
            font-family: PingFangSC-Medium;
            color: rgba(0, 0, 0, 1);
            font-weight: bold;
            text-align: center;
        }

        .shareImgDiv {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 30;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .shareImgDiv img {
            position: absolute;
            top: 0.2rem;
            left: 0;
            right: 0;
            margin: auto;
            width: 6.12rem;
        }

        .audioBG {
            width: 0;
            height: 0;
        }

        .questionNameDiv {
            margin-bottom: 1.3rem;
        }

        /*引导按钮*/
        .btnDiv {
            position: fixed;
            top: 10.76rem;
            width: 6.6rem;
            height: 0.9rem;
            margin-left: 0.16rem;
            margin-right: 0.44rem;
            background-image: url("./img/tbnBgImg@3x.png");
            background-size: 100% 100%;
            text-align: center;
            line-height: 0.86rem;
            color: #fff;
            font-size: 0.4rem;
            font-family: PingFangSC-Medium;
        }

        /*新手指引*/
        .guide {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            /*background-color: ;*/
            z-index: 20;
        }

        .guide img {
            position: absolute;
            top: 2.6rem;
            width: 4.68rem;
            height: 1.02rem;
        }
    </style>
</head>
<body>
<div id="wrap">
    <audio id="audio" class="audioBG" :src="audioSrc" autoplay="autoplay"></audio>
    <div v-show="isShow" class="shareImgDiv" @click="closeShareFun">
        <img src="./img/shareImgQ.png" alt="">
    </div>
    <div class="cupImgDiv">
        <img class="cupImg" src="./img/cup@2x.png" alt="">
    </div>
    <div class="cupContent">
        答对题目:{{rightNums}}/{{questionListWithUserAnswers.length}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总用时:{{ttime}}
    </div>
    <ul class="questionUl">
        <li class="questionLi" :class="{right:item.result==1,fault:item.result==0}"
            v-for="item in questionListWithUserAnswers">
            <!--{{item.question_number}}-->
            <div @click="changeNumFun(item.result,item.question_number)"> {{item.question_number}}</div>
        </li>
    </ul>
    <!-- 题目UI -->
    <div class="questionNameDiv" v-for="item in questionListWithUserAnswers">
        <div :class="{none:item.question_number!==isQuestShow}">
            <p class="questionName"> {{item.question_number}}、{{item.question_content_en}}</p>
            <div v-my_option="item"></div>
            <h5 class="question_analys_title">题目解析</h5>
            <p class="question_analys_content">
                {{item.question_analysis}}
            </p>
        </div>
    </div>
    <div class="btnDiv" @click="reviewContent()">
        <span>内容回顾</span>
    </div>
    <div class="guide" v-if="guideShow">
        <img src="./img/checkAnswer@3x.png" @click="saveGuideFn('user-answer')" alt="">
    </div>
</div>
</body>
</html>
<script src="js/zepto.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/basis.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" charset="utf-8"></script>
<script src="js/vue-router.js" charset="utf-8"></script>
<script src="js/jweixin-1.2.0.js" charset="utf-8"></script>
<script src="js/weixinShare.js" type="text/javascript" charset="utf-8"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
    var url = location.search;
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串；
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = ( strs[i].split("=")[1] );
        }
        console.log(theRequest); //此时的theRequest就是我们需要的参数；
    }
    ;
    //指令
    Vue.directive('my_option', {
        bind: function (el, binding, vnode) {
            var question = binding.value;
            var html = "";
            if (question.question_type == 4) {
                // 表格题型
                question.question_option[0].columns.unshift({"id": 0, "value": ""});
                question.question_option[0].rows.unshift({"id": 0, "value": ""});
                var columns = question.question_option[0].columns;
                var rows = question.question_option[0].rows;
                var q4 = "<table class='tables'>";
                for (var r = 0; r < rows.length; r++) {
                    var row = rows[r];
                    q4 += "<tr>"
                    for (var c = 0; c < columns.length; c++) {
                        q4 += "<td>"
                        if (r == 0 && c == 0) {
                            q4 += "&nbsp;"
                        } else if (r == 0 && c != 0) {
                            // 表头
                            q4 += "<span class='th_head'>" + columns[c].value + "</span>";
                        } else if (r != 0 && c == 0) {
                            // 列头
                            q4 += "<span class='tr_head'>" + rows[r].value + "</span>";
                        } else {
                            if (question.user_answer !== null) {
                                var answer = question.question_answer[r - 1].result;
                                var u_answer = [];//与当前小题目对应的用户的答题结果(0错误,1正确)
                                var correct_ua = null;//与当前小题目对应的用户的答案
                                for (var i = 0; i < question.user_answer.length; i++) {
                                    var ua = question.user_answer[i];
                                    if (ua.id == row.id) {
                                        correct_ua = ua;
                                        break;
                                    }
                                }
                                if (correct_ua == null) {
                                    u_answer = [];
                                } else {
                                    u_answer = eval(correct_ua.result);
                                }
                                var ar = answer.some(function (x) {
                                    return x == c;
                                });
                                var uar = u_answer.some(function (x) {
                                    return x == c;
                                });
//                                 判断答案
                                if (ar && uar) {
                                    // 回答正确
                                    q4 += "<span class='ok'>" + '✔' + "</span>";
                                } else if (!ar && uar) {
                                    //选错
                                    q4 += "<span class='error'>" + '✘' + "</span>";
                                } else if (ar && !uar) {
                                    //未选
                                    q4 += "<span class='noChange'>" + '✔' + "</span>";

                                } else {
                                    //无答案,也未选
                                    q4 += "<span >" + ' ' + "</span>";
                                }


                            }

                        }

                        q4 += "</td>"
                    }
                    q4 += "</tr>"
                }
                q4 += "</table>";
                html += q4;
            } else if (question.question_type == 1) {
                // 单选题型
                var uAnswer, qAnswer;
                for (var i = 0; i < question.question_option.length; i++) {
                    var optionId = question.question_option[i].id;
                    var option = question.question_option[i];
                    for (var ua = 0; ua < question.user_answer.length; ua++) {
                        uAnswer = question.user_answer[ua];
                    }
                    for (var qa = 0; qa < question.question_answer.length; qa++) {
                        qAnswer = question.question_answer[qa];
                    }
                    if (uAnswer == optionId && qAnswer == optionId) {
                        //选对
                        html += '<p class="questionOption ok">' + option.label + ':&nbsp&nbsp' + option.content + '</p>';
                    } else if (uAnswer == optionId && qAnswer != optionId) {
                        // 选错
                        html += '<p class="questionOption error ">' + option.label + ':&nbsp&nbsp' + option.content + '</p>';
                    } else if (uAnswer != qAnswer && qAnswer == optionId) {
                        //正确未选
                        html += '<p class="questionOption ok">' + option.label + ':&nbsp&nbsp' + option.content + '</p>';
                    } else {
                        //不正确未选
                        html += '<p class="questionOption ">' + option.label + ':&nbsp&nbsp' + option.content + '</p>';
                    }


                }


            } else if (question.question_type == 2) {
                //多选题型
                for (var i = 0; i < question.question_option.length; i++) {
                    var optionId_m = question.question_option[i].id;
                    var option_m = question.question_option[i];
                    var qAnswer_m = question.question_answer.some(function (t) {
                        return optionId_m == t
                    });
                    var uAnswer_m = question.user_answer.some(function (t) {
                        return optionId_m == t
                    });
                    if (qAnswer_m && uAnswer_m) {
                        //选对
                        html += '<p class="questionOption ok">' + option_m.label + ':&nbsp&nbsp' + option_m.content + '</p>';
                    } else if (!qAnswer_m && uAnswer_m) {
                        //选错
                        html += '<p class="questionOption error">' + option_m.label + ':&nbsp&nbsp' + option_m.content + '</p>';
                    } else if (qAnswer_m && !uAnswer_m) {
                        //正确未选
                        html += '<p class="questionOption noChange">' + option_m.label + ':&nbsp&nbsp' + option_m.content + '</p>';

                    } else if (!qAnswer_m && !uAnswer_m) {
                        //错误未选
                        html += '<p class="questionOption">' + option_m.label + ':&nbsp&nbsp' + option_m.content + '</p>';
                    }
                }


            } else if (question.question_type == 3) {
                //排序题型

                var option_o, optionId_o, qAnswer_o, uAnswer_o;
                for (var i = 0; i < question.question_answer.length; i++) {
                    qAnswer_o = question.question_answer[i];
//                  optionId_o = question.question_option[i].id;
                    option_o = question.question_option[qAnswer_o - 1];
                    uAnswer_o = question.user_answer[i];

                    if (qAnswer_o == uAnswer_o) {
                        html += '<p class="questionOption ok">' + option_o.label + ':&nbsp&nbsp' + option_o.content + '</p>';
                    } else if (qAnswer_o != uAnswer_o) {
                        html += '<p class="questionOption error">' + option_o.label + ':&nbsp&nbsp' + option_o.content + '</p>';
                    }
                }
            }
            el.innerHTML = html;

        }
    })
    var vm = new Vue({
        el: '#wrap',
        data: {
            tpo_name: '',
            scenario_name_en: '',
            scenario_name_cn: '',
            cover_url: '',
            article_en: '',
            article_cn: '',
            questionListWithUserAnswers: '',
            isQuestShow: 1,
            isRight: false,
            isFault: false,
            question_option: '',
            rightNums: 0,
            ttime: "0:0",
            isShow: true,
            audioSrc: './img/Congrats.mp3',
            guideShow: false,
        },
        created: function () {
            this.searchGuideFn('user-answer')
        },
        methods: {
            HttpDataFun: function () {
                this.$http.post(URL + '/tpo/exercise/categories/scenario/review/' + theRequest.id, {}).then(function (res) {
                        console.log(res.data);
                        this.tpo_name = res.data.data.tpo_name;
                        this.scenario_name_en = res.data.data.scenario_name_en;
                        this.scenario_name_cn = res.data.data.scenario_name_cn;
                        this.cover_url = res.data.data.cover_url;
                        this.article_en = res.data.data.article_en;
                        this.article_cn = res.data.data.article_cn;
                        // 题目,将相关字符串解析成对象
                        this.questionListWithUserAnswers = res.data.data.questionListWithUserAnswers;
                        for (var i = 0; i < this.questionListWithUserAnswers.length; i++) {
                            //答对题数
                            if (this.questionListWithUserAnswers[i].result == 1) {
                                this.rightNums++;
                            }
                            if (i == this.questionListWithUserAnswers.length - 1) {

                                var x = this.questionListWithUserAnswers[i].duration;
                                var m = Math.floor(x / 60);
                                var s = x.toFixed(0) - m * 60;
                                m = m < 10 ? +m + "'" : m + "'";
                                s = s < 10 ? +s + '"' : s + '"';
                                this.ttime = m + s;
                            }
                            // 选项
                            this.questionListWithUserAnswers[i].question_option = eval(this.questionListWithUserAnswers[i].question_option);
                            // 答案
//                            console.log('qan:'+this.questionListWithUserAnswers[i].question_answer);
//                            console.log('uan:'+this.questionListWithUserAnswers[i].user_answer);

                            this.questionListWithUserAnswers[i].question_answer = eval(this.questionListWithUserAnswers[i].question_answer);
                            // 用户答案
                            this.questionListWithUserAnswers[i].user_answer = eval(this.questionListWithUserAnswers[i].user_answer);
                        }

//                        console.log(this.questionListWithUserAnswers[0].question_option);
                    }, function (res) {

                    }
                )

            },
            changeNumFun: function (val1, val2) {
                this.isQuestShow = val2;
//                console.log(val1)
                if (val1 == 1) {
                    this.isRight = true;
                }
                if (val1 == 0) {
                    this.isfault = true;
                }
            },
            closeShareFun: function () {
                this.isShow = false;
            },
            reviewContent: function () {
                window.location.href = 'review-content.html?id=' + theRequest.id;
            },
            //新手引导数据查询
            searchGuideFn: function (data) {
                this.$http.post(URL + '/tpo/operation-guide/search/' + data, {}).then(function (res) {
                    console.log(res);
                    if (res.data.data == 0) {
                        this.guideShow = true;
                    }
                }, function (res) {

                })
            },
            //新手引导后台传值
            saveGuideFn: function (data) {
                console.log(123+data)
                this.guideShow = false;
                this.$http.post(URL + '/tpo/operation-guide/save/' + data, {
                    'article-index': data,
                }).then(function (res) {
                }, function (res) {
                })
            },

        },
        updated:function () {
            document.addEventListener("WeixinJSBridgeReady", function () {
                document.getElementById('audio').play();
            }, false);
        },
    })
    vm.HttpDataFun();
//    //处理页面返回
//    $(function () {
//        pushHistory();
//        window.addEventListener("popstate", function (e) {  //回调函数中实现需要的功能
////             alert("我监听到了浏览器的返回按钮事件啦123");
////            window.history.go(-3);
//            location.href = "category.html?id="+theRequest.id;  //在这里指定其返回的地址
//        }, false);
//
//        function pushHistory() {
//            var state = {
//                title: "练习页面",
//                url: "category.html?id="+theRequest.id
//            };
////        window.history.go(-3);
//            window.history.pushState(state, state.title, state.url);
//        }
//    })



</script>